<!--
 * @Author: Guiter 1336263157@qq.com
 * @Date: 2023-11-29 09:26:14
 * @LastEditors: Guiter 1336263157@qq.com
 * @LastEditTime: 2023-11-29 20:22:16
 * @FilePath: \nuxt3-music-player\src\pages\musicLists\[id].vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<script setup lang="ts">
import { getMusicListsDetail } from '~/server/api/user';
import type { Tracks } from '~/types/songs';

/**
 * 路由
 */
const route = useRoute();
/**
 *
 */
const timerData = ref<Tracks[]>([]);

const getData = async (): Promise<void> => {
  console.log(route.params.id);
  timerData.value = [];
  const res = await getMusicListsDetail(Number(route.params.id));
  if (res.code === 200) {
    timerData.value = res.playlist.tracks;
  } else {
    useMessage({
      message: '网络错误',
      type: 'error'
    });
  }
};

onMounted(async () => {
  await nextTick();
  await getData();
});
</script>

<template>
  <div class="box-border h-full w-full p-4">
    <ListsHeader>
      <div v-for="(items, index) in timerData" :key="index">
        <Lists :data="items" :index="index"></Lists>
      </div>
    </ListsHeader>
  </div>
</template>
